<template>
  <view class="cart">
    <v-nav-bar :nav-bar="navBar" :top="top" />
    <v-nothing :list="list" v-if="show" />
    <v-list :list="list"
      @checkedItem="checkedItem"
      @addQuantity="addQuantity"
      @subQuantity="subQuantity"
      @changeQuantity="changeQuantity"
      @deleteCart="deleteCart"/>
    <v-footer :list="list" @allSelected="allSelected" />
    <!--<view class="safe-bottom" :style="{ height: safeAreaInsets.bottom + 'px' }"></view>-->
    <!-- 猜你喜欢 -->
    <v-like v-if="list.length === 0 && show" />
  </view>
</template>

<script>
import NavBar from '../components/cart/NavBar'
import List from '../components/cart/List'
import Footer from '../components/cart/Footer'
import Nothing from '../components/cart/Nothing'
import Like from '../../../components/like/index'

import CartModel from '../../../api/cart'
import base64 from '../../../util/base64'
const cartModel = new CartModel()

import { goLogin, navTabHeight } from '../../../util/platform'
import { _isLogin } from '../../../util/util'

export default {
  props: ['t'],
  components: {
    'v-nav-bar': NavBar,
    'v-list': List,
    'v-footer': Footer,
    'v-nothing': Nothing,
    'v-like': Like
  },
  watch: {
    // 解决从详情页过来刷新问题
    t: {
      handler(v) {
        // console.log(v)
        // 这种写H5有问题
        // _isLogin().then(() => {
        //   this.fetch()
        // })
        if (this.$store.getters['User/info']) {
          this.fetch()
        }
      }
    }
  },
  data() {
    return {
      // 状态栏与导航栏高度
      navBar: {},
      // 吸顶距离
      // #ifdef H5
      top: -44,
      // #endif
      // #ifdef APP-PLUS || MP-WEIXIN
      top: 0,
      // #endif
      list: [],
      // safeAreaInsets: { top: 0, bottom: 0 }
      show: false
    }
  },
  methods: {
    fetch() {
      // 购物车列表
      uni.showLoading({
        title: '正在加载...'
      })
      this.show = false
      cartModel.list().then(response => {
        // uni.hideLoading()
        let { data } = response
        data = base64.parse(data)
        this.list = data
        uni.hideLoading()
        this.list.forEach(x => {
          this.$set(x, 'selected', +x.selected !== 0)
        })
      }).finally(() => {
        this.show = true
      })
    },
    // 全选操作
    allSelected(v) {
      this.list.forEach(x => {
        this.$set(x, 'selected', v)
      })
      cartModel.allSelected({ selected: v }).then(() => {})
    },
    // 单选操作
    checkedItem(item) {
      this.list.forEach(x => {
        if (x.id === item.id) {
          const selected = !x.selected
          this.$set(x, 'selected', selected)
          cartModel.itemSelected({ id: item.id, selected }).then(() => {})
        }
      })
    },
    // 加
    addQuantity(item) {
      item.quantity = item.quantity + 1
      cartModel.increment({ ...item }).then(() => {
        this.list.forEach(x => {
          if (x.id === item.id) {
            x.quantity = item.quantity
            x.selected = true
          }
        })
      })
    },
    // 减
    subQuantity(item) {
      item.quantity = item.quantity - 1
      item.selected = true
      cartModel.decrement({ ...item }).then(() => {
        // 小程序中需要这样写,才能改变值
        this.list.forEach(x => {
          if (x.id === item.id) {
            x.quantity = item.quantity
            x.selected = true
          }
        })
      })
    },
    // 改变数量
    changeQuantity(item) {
      cartModel.changeNum({ ...item }).then(() => {
        this.list.forEach(x => {
          if (x.id === item.id) {
            x.quantity = +item.quantity
            x.selected = true
          }
        })
      })
    },
    // 删除
    deleteCart() {
      const num = this.list.filter(x => x.selected === true).length
      if (num === 0) {
        return uni.showToast({
          title: '请选择要删除的商品',
          icon: 'none'
        })
      }
      cartModel.remove().then(() => {
        this.list = this.list.filter(x => x.selected === false)
        uni.showToast({
          title: '删除成功',
          icon: 'none',
          duration: 500
        })
      })
    }
  },
  created() {
    // 设置导航高度
    this.navBar = navTabHeight()
    // 获取数据
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 10
    })
    // 判断登录否
    _isLogin().then(() => {
      this.fetch()
    }).catch(() => {
      uni.showModal({
        title: '需要登录才能继续操作',
        confirmText: '立即登录',
        success: res => {
          if (res.confirm) {
            goLogin()
          } else {
          }
        }
      })
    })
  },
  mounted() {
    // const systemInfo = uni.getSystemInfoSync()
    // this.safeAreaInsets = systemInfo.safeAreaInsets || {
    //   top: systemInfo.statusBarHeight || 0,
    //   bottom: 0
    // }
    // console.log(this.safeAreaInsets.bottom)
    // console.log(1111)
  }
}
</script>

<style scoped lang="scss">
.cart {
  // 苹果安全区
  //padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

  /* #ifdef H5 */
  padding-bottom: 20rpx;
  /* #endif */
}
//.safe-bottom {
//  width: 100%;
//  position: sticky;
//  bottom: 0;
//}
</style>
